<html>
<head>
<script type="text/javascript" src="jquery.js">
</script>

<script>

var feild_width = 10;
var feild_height = 10;
var block_width = 50;
var block_height = 50;

var feild_map = new Array();

function checkBlock(_x, _y, _value){
 if(_x<0 || _x>=feild_width || _y<0 || _y>=feild_height)
  return;
 if(feild_map[_x][_y] == _value){
  feild_map[_x][_y] = 0;  
  checkBlock(_x-1, _y, _value);
  checkBlock(_x+1, _y, _value);
  checkBlock(_x, _y-1, _value);
  checkBlock(_x, _y+1, _value); 
 }
}

function swapBlock(_x1, _y1, _x2, _y2){
	var temp = feild_map[_x1][_y1];
	feild_map[_x1][_y1] = feild_map[_x2][_y2];
	feild_map[_x2][_y2] = temp;
}

function settleDown(){
 for(var x=0; x<feild_width; x++){
   var temp = new Array();
   for(var y = feild_height-1; y >= 0; y--){
     temp[y] = feild_map[x][y];
     feild_map[x][y] = 0;
   }
   var cur_y = feild_height-1;
   for(var y = feild_height-1; y >= 0; y--){
     if(temp[y] != 0){
       feild_map[x][cur_y] = temp[y];
       cur_y--;     
     }
   }
 }
}

function settleLeft(){
  for(var x=0; x<feild_width-1; x++){
    var is_clear = true;
    for(var y=0; y<feild_height; y++){
      if(feild_map[x][y] != 0){
         is_clear = false;      
      }
    }
    if(is_clear){
      for(var y=0; y<feild_height; y++){
        if(feild_map[x+1][y] != 0){
          swapBlock(x,y,x+1,y);
        }
      }
    }
  }
}


function render(){
 var x=0, y=0;
 for(x=0; x<feild_width; x++){
  for(y=0; y<feild_height; y++){
   var block = document.getElementById("id_"+x+"_"+y);
   switch(feild_map[x][y]){
    case 0:
     block.style.backgroundColor = "#000000";
    break;
    case 1:
     block.style.backgroundColor = "#FF0000";
    break;
    case 2:
     block.style.backgroundColor = "#00FF00";
    break;
    case 3:
     block.style.backgroundColor = "#0000FF";
    break;
    case 4:
     block.style.backgroundColor = "#FFFF00";
    break;
    case 5:
     block.style.backgroundColor = "#FF00FF";
    break;
    default:
    break;   
   }  
  } 
 }
}

function isBlockLive(_x, _y)
{
  var block_value = feild_map[_x][_y];
  if(block_value != 0){
  				
		   if((_x-1>=0 && feild_map[_x-1][_y] == block_value)
       ||(_x+1<feild_width && feild_map[_x+1][_y]==block_value)
       ||(_y+1<feild_height && feild_map[_x][_y+1]==block_value)
       ||(_y-1>=0 && feild_map[_x][_y-1]==block_value)){
                
        return true;
     }
  }
  return false;
}
function isGameOver(){
  for(var x=0; x<feild_width; x++){
    for(var y=0; y<feild_height; y++){
       if(isBlockLive(x,y)){
         return false;       
       }
    }  
  }
  return true;
}

function blocksLeft(){
  var blocks = 0;	
	 for(var x=0; x<feild_width; x++){
    for(var y=0; y<feild_height; y++){
      if(feild_map[x][y] != 0){
        blocks++;
      }
    }  
  }
  return blocks;
}

function ini(){
 var x = 0;
 var y = 0;
 for(x=0; x<feild_width; x++){
  feild_map[x] = new Array();
  for(y=0; y<feild_height; y++){
		 feild_map[x][y] = Math.ceil(Math.random() * 5);  
  }
 }
 //create blocks
 for(x=0; x<feild_width; x++){
 	 for(y=0; y<feild_height; y++){
 	  var block = document.createElement("div");
   block.style.position = "absolute";   
   block.style.width = block_width;
 	  block.style.height = block_height;
 	  block.style.left = x * block_width;
 	  block.style.top = y * block_height; 
 	  block.style.backgroundColor = "#000000";	  
		 block.id = "id_"+x+"_"+y;
		 block.id_x = x;
		 block.id_y = y;
		 block.onclick = function(){
    var block_value = feild_map[this.id_x][this.id_y];
    var _x = 	this.id_x, _y = this.id_y;		  
		  if(isBlockLive(_x, _y)){
       checkBlock(_x,_y,block_value);
       settleDown();
       settleLeft();
       render();
       document.getElementById("static_blocks_count").innerHTML = blocksLeft();
       if(isGameOver()){
         alert("Game Over!");
       }		 
		   }
    }
    document.body.appendChild(block);
		 }
 	 }
 	 var static_bl = document.getElementById("static_blocks_left");
 	 static_bl.style.left = block_width * feild_width + 130;
 	 static_bl.style.top = 50;
 	 
 	 var static_count = document.getElementById("static_blocks_count");
 	 static_count.innerHTML = feild_width * feild_height;
 	 static_count.style.left = block_width * feild_width + 40;
 	 static_count.style.top = 40;
 	 
}



$(document).ready(function (){
 ini();
 render();
});
</script>
</head>
<body>
<div id="static_blocks_count" style="font-size:50px; position:absolute; color:#FF0000;"> 9 </div>
<div id="static_blocks_left" style="font-size:30px; position:absolute; color:#000000" > Blocks Left </div>
</body>
</html>